<template>
    <div class="ui fluid container">
        <div class="open_top"></div>
        <div class="ui grid">
            <div class="one wide column"></div>


            <div class="nine wide column">
                <div class="warm_panel">
                    <transition name="slide-fade">
                        <div class="ui orange message" v-show="warm">{{message}}
                        </div>
                    </transition>
                </div>

                <textarea v-model="url" class="text" placeholder="请输入需要批量打开的网址..." required autofocus></textarea>
                <button class="ui teal button" v-on:click="openUrl()">打开</button>
                <div class="ui labeled input" style="float: left;margin-top:3px">
                    <div class="ui label">
                        分隔符：
                    </div>
                    <input type="text" v-model="sept">
                </div>
                <div class="tip">
                    <p>提示：</p>
                    <div class="ui bulleted list">
                        <div class="item">默认以<b> http</b> 作为分隔符</div>
                        <div class="item">首次使用浏览器会<b>拦截本站弹窗</b>，请点击选择为<b>允许本站所有弹窗</b></div>
                    </div>
                </div>
            </div>


            <div class="five wide column"></div>
            <div class="one wide column"></div>
        </div>
        <Tree></Tree>
        <Footer></Footer>
    </div>
</template>

<script>
    import Footer from "../../components/Footer";
    import Tree from "../../components/Tree";

    export default {
        name: "OpenUrl",
        data() {
            return {
                url: '',
                warm: 0,
                message: '未输入网址...',
                sept: 'http'
            }
        },
        components: {
            Footer,
            Tree
        },
        created() {
            this.hideMenu()

        },
        methods: {
            hideMenu() {
                this.$store.commit('negate');
                $('.sidebar')
                    .sidebar('setting', 'transition', 'push')
                    .sidebar('hide');
            },
            openUrl() {

                if (!this.url) {
                    this.warm = 1;
                    this.message = '未输入网址...';
                    let _that = this;
                    setTimeout(function () {
                        _that.warm = 0;
                    }, 2500);
                    return false;
                }

                let res = this.url.split(" ").join("");//去除空格
                res = res.split(this.sept);

                console.log(res.length);
                if (res.length == 1) {
                    this.warm = 1;
                    this.message = '以"' + this.sept + '"划分未找到网址...';
                    let _that = this;
                    setTimeout(function () {
                        _that.warm = 0;
                    }, 2500);
                    return false;
                }
                let sept = this.sept;
                if (sept !== 'http' || sept !== 'https') {
                    sept = "http://" + this.sept;
                }

                for (let i = 1; i < res.length; i++) {
                    window.console.log(sept + res[i]);
                    window.open(sept + res[i], "i" + i, '', false);
                }
            }
        }
    }
</script>

<style scoped>
    .open_top {
        height: 10vw;
        background-color: darkseagreen;
    }

    .warm_panel {
        height: 55px;
        /*border: 1px solid;*/
        margin-top: 1vw;

    }

    .text {
        width: 100%;
        height: 20.5vw;
        margin-top: .2vw;
        padding: 10px;
        resize: none;
    }

    .text::placeholder {
        font-family: STXINGKA;
        font-size: larger;
    }

    .button {
        margin-top: .5vw;
        float: right;
    }

    .message {
        text-align: center;
        font-weight: 600;
        letter-spacing: 3px;
        font-family: STXINGKA;
    }

    .tip {
        float: left;
        margin-top: 2.5vw;
        width: 100%;
        /*border: 1px solid skyblue;*/
        padding: 5px;
        font-weight: 500;
        color: black;
        opacity: .8;
    }


    /*********************/
    .slide-fade-enter-active {
        transition: all .3s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }
</style>
